<template>
  <div>
    <div class="taskIntro" id="taskIntro">
      <div class="sp1"><span>任务名称：</span><span>{{form.title}}</span></div>
      <div class="sp1"><span>任务简述：</span><span>{{form.short_intro}}</span>
      </div>
      <div class="sp1" v-if="form.task_type === 1||form.task_type === 2">
        <span>任务价值：</span><span>{{form.task_value}}</span></div>
      <div class="sp1">
        <span>难易程度：</span>
        <span>
          <div class="img">
                <img src="@/assets/images/ic_stars.png" alt="" v-for="i in (form.difficulty_star|number)">
                <img src="@/assets/images/ic_stars2.png" alt="" v-for="i in ((5-form.difficulty_star)|number)">
          </div>
        </span>
      </div>
      <div class="sp1" v-if="!user_task_id"><span>剩余名额：</span><span>{{form.task_num}}</span></div>
      <div class="sp1"><span>任务截止时间：</span><span>{{form.end_time}}</span></div>
      <div class="sp1"><span>兑换后有效期：</span><span>{{form.user_expire_day}}天</span></div>
    </div>
    <div class="line"></div>
    <div class="div1">
      <div class="top">
        <div class="tip"></div>
        <span>任务简介</span>
      </div>
      <p v-html="$options.filters.unescape(form.intro)"></p>
    </div>
    <div class="div1" v-if="form.task_type === 3 ">
      <div class="top">
        <div class="tip"></div>
        <span>实物奖励介绍</span>
      </div>
      <p v-html="$options.filters.unescape(form.prizes_intro)"></p>
      <img :src="form.prizes_img_url" alt="">
    </div>
    <div style="height: 1rem;width: 100%"></div>

  </div>
</template>

<script>
  /**
   *  任务简介
   * @Author zzl
   * @Date 2019/5/15 13:50.
   */

  export default {
    mounted() {
      // this.$nextTick(() => {
      //   if(document.getElementById('taskIntro').getElementsByTagName("img")){
      //     let imgArr = document.getElementById('taskIntro').getElementsByTagName("img");
      //     for (let j in imgArr) {
      //       if(imgArr[j].style === undefined){
      //         continue;
      //       }
      //       imgArr[j].style.width = '100%'
      //     }
      //   }
      //
      //   if(document.getElementById('taskIntro').getElementsByTagName("span")){
      //     let spanArr = document.getElementById('taskIntro').getElementsByTagName("span");
      //     for (let i in spanArr) {
      //       if(spanArr[i].style === undefined){
      //         continue;
      //       }
      //       spanArr[i].innerText = this.$options.filters.unescape(spanArr[i].innerText)
      //     }
      //   }
      //
      // });
    },
    components: {},
    props: {
      form: {
        type: Object,
      },
      user_task_id: {}
    },
    data() {
      return {}
    },
    computed: {},
    methods: {
      /*
      * 转成number
      * */
      number(val) {
        return parseInt(val)
      },
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .taskIntro {
    width: 100%;
    height: 100%;
    padding: 0.33rem;
    display: flex;
    flex-direction: column;
    justify-content: left;
    box-sizing: border-box;
    font-size: 0.3rem;

    .sp1 {
      display: flex;
      flex-direction: row;
      margin: 0.09rem 0;

      .img {
        display: flex;
        flex-direction: row;
        justify-content: left;

        img {
          width: 0.39rem;
          height: 0.38rem;
          margin-right: 0.16rem;
        }
      }

      span {
        display: block;
      }

      span:first-child {
        color: #D2D2D2;
        font-size: 0.3rem;
      }

      span:last-child {
        width: 4.6rem;
        text-align: left;
        line-height: 0.4rem;
        color: #333333;
      }
    }

    .sp1:nth-child(6) {
      span:last-child {
        width: 4.6rem;
      }
    }

    .sp1:last-child {
      span:last-child {
        width: 4.6rem;
      }
    }
  }

  .line {
    width: 100%;
    height: 0.12rem;
    background: #FAFAFA;
  }

  .div1 {
    padding: 0 0.32rem;
    box-sizing: border-box;

    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0.2rem 0;

      .tip {
        width: 0.08rem;
        height: 0.33rem;
        margin-right: 0.15rem;
        background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
      }

      span {
        font-size: 0.32rem;
        font-family: PingFangSC-Medium;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 0.48rem;
      }
    }

    img {
      width: 100%;
      height: auto;
    }
  }


</style>
